<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <el-select v-model="query.QueryType" placeholder="查询方式" class="handle-select mr10">
          <el-option key="1" label="用户名" value="username"></el-option>
          <el-option key="2" label="手机号" value="phone"></el-option>
          <el-option key="3" label="邮箱" value="email"></el-option>
        </el-select>
        <div>
          <el-input v-model="query.SearchInput" placeholder="请输入" class="handle-input mr10"></el-input>
          <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
        </div>
      </div>

      <el-table
          :data="tableData"
          height="550"
          border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column label="序号" align="center">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" align="center"></el-table-column>
        <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
        <el-table-column prop="email" label="邮箱" align="center"></el-table-column>
        <el-table-column label="操作" width="220" align="center">
          <template #default="scope">
            <div v-if="HoverControl === scope.$index" @mouseleave="handleMouseLeave" class="lr_dev">
              <el-button text @click="turnLend(scope.row)">
                借用申请
              </el-button>
              <el-button text @click="turnReturn(scope.row)">
                归还申请
              </el-button>
            </div>
            <el-button v-else text :icon="Sort" @mouseover="handleMouseOver(scope.$index)">
              借还申请
            </el-button>
            <el-button text :icon="Edit" @click="handleResetPwd(scope.$index, scope.row)">
              重置密码
            </el-button>
            <el-button text :icon="Delete" class="red" @click="handleDelete(scope.$index, scope.row)">
              注销
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, watch} from 'vue';
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, Sort, SortUp, SortDown } from '@element-plus/icons-vue';
import axios from "axios";
import {useUserStore} from "../../store/user";

interface TableItem {
	user_id: string;
	username: string;
  password: string;
  phone: string;
	email: string;
  [key: string]: string;
}

const query = reactive({
	QueryType: 'username',
	SearchInput: '',
	pageIndex: 1,
	pageSize: 10
});

const router = useRouter()
const HoverControl = ref(-1)
const allData = ref<TableItem[]>([]);
const tableData = ref<TableItem[]>([]);

const handleMouseOver = (index: number) => {
  HoverControl.value = index
}

const handleMouseLeave = () => {
  HoverControl.value = -1
}

// 获取表格数据
const getData = () => {
  axios.get(`http://localhost:8080/User`)
      .then(res=>{
        allData.value=res.data.data
        tableData.value=allData.value
      })
};

// 查询操作
const handleSearch = () => {
  if(query.SearchInput==""){
    tableData.value=allData.value
  }else {
    tableData.value = []
    for(let i=0;i<allData.value.length;i++){
      if(allData.value[i][query.QueryType]!=null&&allData.value[i][query.QueryType].toLowerCase().indexOf(query.SearchInput.toLowerCase())!=-1){
        tableData.value.push(allData.value[i])
      }
    }
  }
};

const handleResetPwd = (index: number, row: any) => {
  ElMessageBox.confirm('确定要重置密码吗?', '提示', {
    type: 'warning'
  })
      .then(() => {
        axios.put(`http://localhost:8080/User/`+row.user_id)
            .then(res=>{
              if(res.data.data){
                ElMessage.success('重置密码成功!');
              }else{
                ElMessage.error("重置密码失败!")
              }
            })
      })
      .catch(() => {});
};

// 删除操作
const handleDelete = (index: number, row: any) => {
  ElMessageBox.confirm('确定要删除吗?', '提示', {
    type: 'warning'
  })
      .then(() => {
        axios.delete(`http://localhost:8080/User/${row.user_id}`)
            .then(res=>{
              if(res.data.data){
                allData.value.splice(index,1)
                ElMessage.success("注销用户成功!")
              }else{
                ElMessage.error("注销用户失败!")
              }
            })
      })
      .catch(() => {});
};

const turnLend = (row: any) => {
  useUserStore().setLendUserInfo(row.username, row.user_id)
  router.push({ name: 'lendHandle' });
}

const turnReturn = (row: any) => {
  useUserStore().setReturnUserInfo(row.username, row.user_id)
  router.push({ name: 'returnHandle' });
}

watch(
    () => router.currentRoute.value,
    (newRoute) => {
      console.log(newRoute.name)
      if(newRoute.name=="userManage"){
        getData()
      }
    },
    { immediate: true }
);
</script>

<style scoped>
.handle-box {
  width: auto;
	margin-bottom: 20px;
  display: flex;
  justify-content: left;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #F56C6C;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
.lr_dev {
  display: flex;
  justify-content: center;
  width: 80%;
  margin: 0 auto;
}
</style>
